<template>
  <div class="side-menu-wrapper">
    <slot></slot>
    <Menu theme="dark" v-show="!collapsed" :open-names="['1']" accordion width="auto">
      <template v-for="menu in menuList">
        <Submenu v-if="menu.children" :key="menu.id" :name="menu.id">
          <template slot="title">
            <Icon :type="menu.meta.icon" />
            {{ menu.meta.title }}
          </template>
          <MenuItem v-for="sub in menu.children" :key="sub.id" :name="sub.id" :to="sub.path">{{
            sub.meta.title
          }}</MenuItem>
        </Submenu>
        <template v-else>
          <MenuItem :key="menu.id" :name="menu.id" :to="menu.path"
            ><Icon :key="menu.id" :type="menu.meta.icon" />{{ menu.meta.title }}</MenuItem
          >
        </template>
      </template>
      <MenuItem name="report" target="_blank" :to="reportUrl">
        <Icon type="md-list-box" />
        报告范例
      </MenuItem>
    </Menu>
    <div class="menu-collapsed" v-show="collapsed" :list="menuList">
      <template v-for="item in menuList">
        <collapsed-menu
          v-if="item.children"
          @on-click="handleSelect"
          :root-icon-size="rootIconSize"
          :icon-size="iconSize"
          :theme="theme"
          :parent-item="item"
          :key="`drop-menu-${item.id}`"
        ></collapsed-menu>
        <Tooltip v-else transfer :content="showTitle(item)" placement="right" :key="`drop-menu-${item.id}`">
          <a class="drop-menu-a">
            <Icon :type="item.meta.icon" />
          </a>
        </Tooltip>
      </template>
    </div>
  </div>
</template>
<script>
import CollapsedMenu from './collapsed-menu.vue'
import Imenu from './imenu.vue'
import ImenuItem from './imenu-item.vue'
import { getUnion } from '@/libs/tools'
import mixin from './mixin'
import config from '@/config'

export default {
  name: 'SideMenu',
  mixins: [mixin],
  components: {
    Imenu,
    ImenuItem,
    CollapsedMenu
  },
  props: {
    menuList: {
      type: Array,
      default() {
        return []
      }
    },
    collapsed: {
      type: Boolean
    },
    theme: {
      type: String,
      default: 'dark'
    },
    rootIconSize: {
      type: Number,
      default: 20
    },
    iconSize: {
      type: Number,
      default: 16
    },
    accordion: Boolean,
    activeName: {
      type: String,
      default: ''
    },
    openNames: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      reportUrl: config.reportUrl,
      openedNames: []
    }
  },
  methods: {
    handleSelect(name) {
      this.$emit('on-select', name)
    },
    getOpenedNamesByActiveName(name) {
      return this.$route.matched.map(item => item.name).filter(item => item !== name)
    },
    updateOpenName(name) {
      if (name === this.$config.homeName) this.openedNames = []
      else this.openedNames = this.getOpenedNamesByActiveName(name)
    }
  },
  computed: {
    textColor() {
      return this.theme === 'dark' ? '#fff' : '#495060'
    }
  },
  watch: {
    activeName(name) {
      if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName(name)
      else this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
    },
    openNames(newNames) {
      this.openedNames = newNames
    },
    openedNames() {
      this.$nextTick(() => {
        this.$refs.menu.updateOpened()
      })
    }
  },
  mounted() {
    // this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name));
  }
}
</script>
<style lang="less">
@import './side-menu.less';
</style>
